<template>
  <div class="order">
      <h4>{{info}}</h4>
      <div class="filter-box" style="padding: 30px;
            background: #fff;
            border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div>
                        <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                            编号：
                            <el-input clearable
                                placeholder="请输入订单编号或物流编号"
                                v-model="orderNum" class="filter-input"
                                 @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                        <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                            买家手机号：
                            <el-input clearable
                                placeholder="请输入手机号码"
                                v-model="buyerTel" class="filter-input"
                                 @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                        <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                            卖家手机号：
                            <el-input clearable
                                placeholder="请输入手机号码"
                                v-model="sellerTel" class="filter-input"
                                @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                        <div class="demo-input-suffix" style="width:350px;" >
                                    所在城市：
                                    <area-select :level="1" v-model="selected" :data="$pcaa"  style="display:inline-block"></area-select> 
                          </div>
                        <el-button type="primary" @click="searchOrder()">搜索</el-button>
                        <!-- <el-button type="danger" style="margin-left:20px;">导出（勾选）</el-button> -->
                    </div>
                    
       </div>  
       <div class="container" style="border-radius: 0 0 5px 5px ">
            <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column type="index"  width="60" label="序号" align="center" :index="indexMethod"></el-table-column>
                 <el-table-column prop="orderId" label="订单编号" width="140" align="center"></el-table-column>
                <el-table-column prop="merchantName" label="买家" width="120" align="center"></el-table-column>
                <el-table-column prop="merchantTel" label="买家手机号" align="center"  width="120">
                </el-table-column>
                 <el-table-column prop="farmerName" label="卖家" align="center" width="120">
                </el-table-column>
                 <el-table-column prop="farmerTel" label="卖家手机号" align="center" width="120">
                </el-table-column>
                 <el-table-column prop="locationCity" label="所在城市" align="center" fit>
                 </el-table-column>
                 <el-table-column prop="orderTime" label="下单时间" align="center" v-if="orderFlag==0" >
                </el-table-column>
                <el-table-column prop="orderTime" label="发货时间" align="center" v-if="orderFlag==1">
                </el-table-column>
                <el-table-column prop="orderTime" label="签收时间" align="center" v-if="orderFlag==2">
                </el-table-column>
                <el-table-column prop="orderTime" label="评价时间" align="center" v-if="orderFlag==3">
                </el-table-column>
                <el-table-column prop="orderTime" label="退款时间" align="center" v-if="orderFlag==4">
                </el-table-column>
                <el-table-column prop="orderTime" label="退款金额" align="center" v-if="orderFlag==4">
                </el-table-column>
                 <el-table-column prop="transNo" label="物流编号" align="center" >
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="order_detail(scope.row.id)">详情</el-button>             
                </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="getPageNum"
                        :page-sizes="[10, 20, 50,100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
           </div>
      </div>
  </div>
</template>

<script>
import { orderList } from '@/request/api'
import { AreaSelect} from "vue-area-linkage";
export default {
    data(){
       return {
           loading:true,
           status:'',
           info:'',
           data: [],
           orderNum:'',
           buyerTel:'',
           sellerTel:'', 
           total:0,
           pageNum:'1',
           pageSize:'10',
           orderFlag:0,//订单列表里面显示0.下单时间，1.发货时间2.签收时间3.评价时间4.退款时间
           selected:[],
       }
    },
    created(){
        let status = this.$route.fullPath.substr(this.$route.fullPath.length-1,1);
        // console.log()
        this.status = status;
        if(this.status == 0){
            this.info = '待处理订单';
        }else if(this.status == 1) {
            this.info = '待发货订单';
             this.orderFlag=0
        }else if(this.status == 2) {
            this.info = '待收货订单';
            this.orderFlag=1
        }else if(this.status == 3) {
            this.info = '待评价订单';
            this.orderFlag=2
        }else if(this.status == 4) {
            this.info = '已完成订单';
            this.orderFlag=3
        }else if(this.status == 5) {
            this.info = '已取消订单';
        }else if(this.status == 6) {
            this.info = '已退款订单';
            this.orderFlag=4
        }
         this.get_orderList();
    },
    components:{
        AreaSelect,
    },
    methods:{
       // 获取序号
       indexMethod(index) {
          return  index + 1 + (this.pageNum -1 ) * this.pageSize;
       },
       // 搜索  
       searchOrder(){
             this.get_orderList();
       },
       //点击详情跳转    
       order_detail(id){
           console.log(1,`/order_${this.status}`)
          this.$router.push({
               path:`/order_${this.status}/order_detail/${id}`
          })
       },
       // 当前页  
       getPageNum(currentPage){
            this.pageNum = currentPage;
            this.get_orderList();
       },
      // 当前页的条数   
       handleSizeChange(currentPage){
         this.pageSize = currentPage;
         this.get_orderList();
       },
       //获取详请的列表
       get_orderList(){
            orderList({
                 pageNum:this.pageNum,
                 pageSize:this.pageSize,
                 status:this.status,
                 orderId:this.orderNum,
                 farmerTel:this.sellerTel, 
                 merchantTel:this.buyerTel,
                 cityId:this.selected[1],
            }).then(res => {
                console.log(res);
                this.loading = false;
                this.data = res.rows;
                this.total = res.total;
            })
       },
    }
 }
</script>
<style  scoped>
.order > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>